import React, { Component } from 'react'
import {  WhiteSpace,Tabs} from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';


import Swiper from '../../commonts/Swiper';
import Swiper_tu from '../../commonts/Swiper_tu';


function renderTabBar(props) {
  return (<Sticky>
    {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
  </Sticky>);
}
export default  class Home extends Component {
 

  render() {
    console.log(this.props)
    const tabs = [
      { title: '精选' },
      { title: '原创艺术' },
      { title: '造艺' },
      { title: '藏艺术' },
    ];
    
    return (
      <div className="main">
     <StickyContainer>
            <Tabs tabs={tabs}
              initalPage={'t2'}
              renderTabBar={renderTabBar}
            >
              <div style={{ width:'100%',height:'100%' ,backgroundColor: '#ffff' }}>
              
               <Swiper />
               <Swiper_tu />
               
               
               </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                Content of second tab
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' ,width:'100%', backgroundColor: 'red' }}>
                Content of third tab
                asasd
                as
                sad
                <ul>
                   <li>sad</li>
                   <li>sad</li>
                   <li>sad</li>
                   <li>sad</li>
                   <li>sad</li>
                   <li>sad</li>

                   <li>sad</li>
                   <li>sad</li>
                   <li>sad</li>
                   <li>sad</li>
                   v
                   v
                   <li>sad</li>
                   v

                   <li>sad</li><li>sad</li>
                   <li>sad</li>
                   v
                   <li>sad</li>

                   <li>sad</li>
                   <li>sad</li>
                   v
                   <li>sad</li>
                   v<li>sad</li>

                   v
                   v
                   v
                   <li>sad</li>
                 </ul>
                asd
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                Content of third tab
              </div>
            </Tabs>
          </StickyContainer>
        <WhiteSpace />
      </div>
    )
  }
}

